<template>
  <div class="container">
    <div class="container_head">
      <!--添加已有学生按钮-->
      <el-button slot="reference" type="primary"
                 style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
                 @click="toStuListSelect">添加已有学生
      </el-button>

      <!--批量新增新学生按钮-->
      <el-button slot="reference" type="primary"
                 style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
                 @click="addNewDialogVisible = true">批量新增新学生
      </el-button>
      <!--批量新增新学生弹框-->
      <el-dialog title="批量新增新学生" :visible.sync="addNewDialogVisible" onclose="addNewDialogVisible = false">
        <el-upload class="upload-demo" :limit="1" :auto-upload="false"
                   :on-change="handleChange">
          <el-button slot="trigger" type="primary">选择文件</el-button>
          <el-button style="margin-left: 10px;" type="success" :disabled="!canUpload"
                     @click="handleUpload">上传文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传一个文件，且不超过10MB</div>
        </el-upload>
        <a href="https://nodark.oss-cn-beijing.aliyuncs.com/JiGuang/images2023/05/11/33a9c89629894b5cab279e04be16bc71班级学生上传模版.xlsx">点击下载文件模板</a>
      </el-dialog>

      <!--返回按钮-->
      <el-button slot="reference" type="primary"
                 style="float: right;position: relative;right: 10px; width: 200px;margin-bottom: 20px"
                 @click="$router.go(-1)">返回
      </el-button>
    </div>
    <el-table
        :data="stuList"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="account"
          label="学号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          label="性别"
          width="60">
        <template slot-scope="scope">
          {{ scope.row.userSex == 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column
          label="身份证"
          width="200">
        <template slot-scope="scope">
          {{ scope.row.identifyCard }}
        </template>
      </el-table-column>
      <el-table-column
          label="生日"
          width="120">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.userBir) }}
        </template>
      </el-table-column>
      <el-table-column
          label="政治面貌"
          width="120">
        <template slot-scope="scope">
          {{ getPolitical(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
          label="个人描述">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.personDesc.substring(0,20)">
            <div class="cell">{{ scope.row.personDesc }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="130">
        <template slot-scope="scope">
          <el-button @click="remove(scope.row)" type="danger" size="small">从此班级移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "AllClassStuList",
  data() {
    return {
      //班级id
      classesIdid: this.$route.query.classIdid,
      //学生列表
      stuList: [],
      //新增新学员列表
      addNewDialogVisible : false,
      //能否上传文件
      canUpload: false,
    }
  }, methods: {
    //初始化数据，查寻该班级所有的学生
    init() {
      const _this = this;
      axios.get("http://localhost:8080/classStuDetail/findStuByClassIdId?classIdId=" + _this.classesIdid).then(function (res) {
        _this.stuList = res.data.data;
        console.log("_this.stuList");
        console.log(_this.stuList);
      })
    },
    //格式化事件
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //政治面貌转换
    getPolitical(row) {
      // 0中共党员1中共预备党员2共青团员3民主党派人士4无党派人士
      switch (row.politicalStatus) {
        case 0:
          return '中共党员';
        case 1:
          return '中共预备党员';
        case 2:
          return '共青团员';
        case 3:
          return '民主党派人士';
        case 4:
          return '无党派人士';
        default:
          return '无党派人士';
      }
    },
    //修改学生信息
    remove(row) {
      const _this = this
      axios.delete("http://localhost:8080/classStuDetail/removeFromClass/" + _this.classesIdid + "/" + row.userId).then(function (res) {
        console.log(res.data.code)
        if (res.data.code == -1) {
          _this.$alert('学生【' + row.userName + '】从班级移除失败，请联系技术人员', '错误', {
            confirmButtonText: '确定'
          });
        }
        if (res.data.code == 0) {
          _this.$alert('学生【' + row.userName + '】移除成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        }
      })
    },
    //跳转学生选择页面
    toStuListSelect() {
      const _this = this
      this.$router.push({
        path: '/stuListSelect',
        query: {
          classIdid: _this.classesIdid
        }
      })
    },
    //文件处理
    handleChange(file) {
      this.file = file.raw;
      this.canUpload = true;
    },
    handleUpload() {
      var _this = this;
      let form = new FormData();
      form.append('file', this.file);
      form.append('classIdid', this.classesIdid);
      axios.post(
          "http://localhost:8080/classStuDetail/addNewStus"
          , form
      ).then(function (response) {
        console.log(response);
        if (response.data.code == 0) {
          _this.$alert('学生添加成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        } else{
          _this.$alert('学生添加失败，请稍后在试', '失败', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        }
      }).catch(function (error) {
      });
    },
  }, created() {
    this.init();
  }
}
</script>

<style scoped>
.container {
  width: 80%;
  margin: auto;
}

.container_head {
  margin-top: 20px;
}
</style>
